<template>
  <div class="positions">
    <h1>职务任免</h1>
    
    <div class="timeline">
      <div class="timeline-item" v-for="(position, index) in positions" :key="index">
        <div class="timeline-dot"></div>
        <div class="timeline-date">{{ position.date }}</div>
        <div class="timeline-content">
          <h3>{{ position.title }}</h3>
          <p>{{ position.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const positions = ref([
  {
    date: '2025年3月',
    title: '担任华为引望副董事长',
    description: '华为引望是华为另一战略业务板块。'
  },
  {
    date: '2024年5月10日',
    title: '华为官网更新管理层信息',
    description: '余承东现任华为常务董事、终端BG董事长、智能汽车解决方案BU董事长、智能终端与智能汽车部件IRB主任。'
  },
  {
    date: '2024年4月30日',
    title: '卸任华为终端BG CEO',
    description: '余承东卸任华为终端BG CEO一职，仍保留终端BG董事长职位。'
  },
  {
    date: '2023年3月',
    title: '当选新一届董事会成员',
    description: '华为投资控股有限公司工会第四届持股员工代表会召开，余承东当选新一届董事会成员。'
  },
  {
    date: '2021年5月18日',
    title: '免去华为云CEO职位',
    description: '华为发文表示，经总裁批准，免去余承东华为云CEO职位。此外，余承东仍为消费者BG CEO以及新增智能汽车解决方案BU CEO。'
  },
  {
    date: '2021年4月',
    title: '被任命为华为云CEO',
    description: '在华为内部调整中增加新职位。'
  },
  {
    date: '2021年1月27日',
    title: '多项职务任命',
    description: '华为内部发文进行多项人事调整，任余承东为消费者BG CEO，本次拟增任命Cloud &AI BG总裁（兼）、Cloud & AI BG行政管理团队主任、增任命Cloud BU总裁（兼）、Cloud BU行政管理团队主任。'
  },
  {
    date: '2020年11月',
    title: '退出荣耀终端公司',
    description: '随着荣耀被出售，余承东退出荣耀终端公司。'
  },
  {
    date: '2018年3月23日',
    title: '当选华为投资控股有限公司常务董事',
    description: '经持股员工代表会投票选举，当选为华为投资控股有限公司常务董事、董事会成员；担任华为消费者业务CEO。'
  },
  {
    date: '1993年',
    title: '加入华为',
    description: '历任3G产品总监、无线产品行销副总裁、无线产品线总裁、欧洲片区总裁、战略与Marketing体系总裁等。'
  }
])
</script>

<style scoped>
.positions {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  margin-bottom: 3rem;
  text-align: center;
  color: #1a1a1a;
}

.timeline {
  position: relative;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 140px;
  height: 100%;
  width: 4px;
  background-color: #e9ecef;
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  margin-left: 160px;
}

.timeline-dot {
  position: absolute;
  left: -26px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #007bff;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #cfe2ff;
  transform: translateY(8px);
  z-index: 1;
}

.timeline-date {
  position: absolute;
  left: -160px;
  width: 120px;
  text-align: right;
  font-weight: bold;
  color: #495057;
}

.timeline-content {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.timeline-content h3 {
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}

.timeline-content p {
  color: #495057;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .timeline::before {
    left: 16px;
  }
  
  .timeline-item {
    margin-left: 40px;
  }
  
  .timeline-date {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    text-align: left;
    margin-bottom: 0.5rem;
    display: block;
  }
  
  .timeline-dot {
    left: -30px;
  }
}
</style>
